<script setup lang="ts">

import { CirclePlus } from '@element-plus/icons-vue'
import {onUnmounted} from "vue";


defineProps({
    title: {
        type: String,
        default: ''
    },
    butTitle: {
        type: String,
        default: '新增'
    },
    showHeader: {
        type: Boolean,
        default: true
    },
    showFooter: {
        type: Boolean,
        default: true
    },
    height100: {
        type: Boolean,
        default: true
    }

})
onUnmounted(() => {

})

const emit = defineEmits(['headerClick'])

const headerClick = () => {
    emit('headerClick')
}

</script>

<template>
    <div class="my-card" :class="{'my-h-100':height100}" id="my-card">

        <div class="my-card-header" v-if="showHeader">
            <slot name="header">
                <div class="left">{{ title }}</div>
                <div class="center"></div>
                <div class="right">
                  <el-button type="primary" @click="$emit('headerClick')" :icon="CirclePlus" >{{ butTitle }}</el-button>
                </div>
            </slot>
        </div>
        <div class="my-card-container my-flex-1 my-overflow-auto my-flex" style="flex-direction: column">
            <slot name="table-search">
                <!-- table search-->
            </slot>
            <slot>
                <!-- table container-->
            </slot>
        </div>
        <div class="my-card-footer" v-if="showFooter">
            <slot name="footer">
                <div class="left"></div>
                <div class="center"></div>
                <div class="right"></div>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>